<template>
	<a-layout>
		<a-layout-header class="bg-white marTom10 h64">
			<a-space wrap>
				<a-form class="w100b" name="basic" :label-col="{ span: 2 }" :wrapper-col="{ span: 3 }">
					<a-form-item label="年份:" :wrapper-col="{ span: 32 }">
						<a-date-picker class="w200 marRight10" v-model:value="pickerYear" picker="year" />
						<a-button type="primary">查询</a-button>
					</a-form-item>
				</a-form>
			</a-space>
		</a-layout-header>
		<a-layout>
			<a-layout style="padding: 0 4px 4px">
				<a-layout-content class="bg-white" :style="{ padding: '24px', margin: 0}">
					<div class="flex alicen j_between">
						<span class="fw600 fz14">节假日管理</span>
						<div class="flex alicen">
							<div class="fz12">工作日</div>
							<div class="colhoilblock ml_10 mr_10" style="background-color: #8bffe2;"></div>
							<div class="fz12">调休节假日</div>
							<div class="colhoilblock ml_10 mr_10" style="background-color: #ffaa00;"></div>
							<div class="fz12">法定节假日</div>
							<div class="colhoilblock ml_10" style="background-color: #aa55ff;"></div>
						</div>
						<span></span>
					</div>
					<a-calendar v-model:value="value">
						<template #dateCellRender="{ current }">
							<div class="w100b flexCenter">
								<div class="w60b">
									<div class="currentdate">{{ current.date() }}</div>
									<div class="currentday"></div>
								</div>
							</div>
						</template>
					</a-calendar>
				</a-layout-content>
			</a-layout>
			<a-layout-sider class="bg-white padsider" width="300">
				<div class="setTitle fz14 fw600">节假日设置</div>
				<a-date-picker class="w100b" />
				<div class="setTitle fz14 fw600">设置为:</div>
				<a-select v-model:value="legal" class="w100b" @change="handleChange">
					<a-select-opt-group>
						<a-select-option value="legal">法定节假日</a-select-option>
						<a-select-option value="adjust">调休节假日</a-select-option>
						<a-select-option value="member">会员日</a-select-option>
					</a-select-opt-group>
				</a-select>
				<div class="h80"></div>
				<a-button shape="round" :block="true" type="primary" size="large">保存</a-button>
			</a-layout-sider>
		</a-layout>
	</a-layout>
</template>
<script lang="ts" setup>
	import { ref } from 'vue';
	import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons-vue';
	import dayjs, { Dayjs } from 'dayjs';
	const pickerYear = ref<Dayjs>();
	const value = ref<Dayjs>();
	const selectedYear = ref<Dayjs>(dayjs()); // 默认值为今年
	const legal = ref<string>('legal'); // 默认值为法定节假日
	const handleYearChange = (date : Dayjs) => {
		selectedYear.value = date;
	};
	const handleQuery = () => {
		if (selectedYear.value) {
			const currentMonth = dayjs().month();
			value.value = selectedYear.value.month(currentMonth);
		}
	};

	const handleChange = (value : string) => {
		// 这里可以添加实际的处理逻辑，根据选择的节假日类型进行操作
	};
	const onPanelChange = (value : Dayjs, mode : string) => {
		console.log(value, mode);
	};
	const selectedKeys1 = ref<string[]>(['2']);
	const selectedKeys2 = ref<string[]>(['1']);
	const openKeys = ref<string[]>(['sub1']);
</script>
<style>
	.padsider {
		padding: 20px 30px;
	}

	.currentdate {
		font-size: 20px;
		text-align: center;
	}
	.mr_10{
		margin-right: 10px;
	}
	.ml_10{margin-left: 10px;}

	.currentday {
		margin: 0 auto;
		border-radius: 10px;
		width: 30%;
		height: 10px;
		background-color: #8bffe2;
	}

	.setTitle {
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.h80 {
		height: 80px;
	}

	/* 隐藏右上角的年选项按钮 */
	:deep(.ant-calendar-header .ant-calendar-year-select) {
		display: none;
	}
</style>